import "./index.scss";

// 当前登录用户信息
const user = {
  // 用户id
  uid: "30009257",
  // 用户头像
  avatar: "",
  // 用户昵称
  uname: "黑马前端"
};

const CommentItem = ({ item, delListHandler }) => {
  return (
    <div className="reply-wrap">
      {/* 评论列表 */}
      <div className="reply-list">
        {/* 评论项 */}
        <div key={item.rpid} className="reply-item">
          {/* 头像 */}
          <div className="root-reply-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" alt="" src={item.user.avatar} />
            </div>
          </div>

          <div className="content-wrap">
            {/* 用户名 */}
            <div className="user-info">
              <div className="user-name">{item.user.uname}</div>
            </div>
            {/* 评论内容 */}
            <div className="root-reply">
              <span className="reply-content">{item.content}</span>
              <div className="reply-info">
                {/* 评论时间 */}
                <span className="reply-time">{item.ctime}</span>
                {/* 评论数量 */}
                <span className="reply-time">点赞数:{item.like}</span>
                {user.uid === item.user.uid && (
                  <span
                    className="delete-btn"
                    onClick={() => delListHandler(item.rpid)}
                  >
                    删除
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CommentItem;
